<template>
  <div class="inputIcon">
    <div class="icon">
      <svg-icon class="icon iconLeft" :icon-class="icon" />
    </div>
    <div class="input">
      <input type="text" :placeholder="placeholder" @input="input" :value="value" :maxlength="maxlength" :type="type">
      <svg-icon @click.native="eyeStatus" v-if="iconRight" class="icon" :icon-class="iconRight" />
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['icon', 'placeholder', 'value', 'iconRight', 'maxlength', 'type'],
    data() {
      return {
        iconType: this.iconRight
      }
    },
    methods: {
      // 向父组件传参当前icon
      eyeStatus() {
        this.$emit('updateIcon', this.iconRight)
      },
      // 向父组件传参当前value值
      input() {
        this.$emit('input',event.target.value);
      }
    }
  }
</script>

<style scoped lang="scss">
  .inputIcon{
    margin-top: 0.9375rem;
    border: 0.0625rem solid #E6E6E6;
    border-radius: 1.875rem;
    text-align: center;
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 18px;
    overflow: hidden;
    color: #323233;
    .iconLeft{
      width: 30px;
    }
    .input{
      position: relative;
      overflow: hidden;
      color: #969799;
      text-align: left;
      vertical-align: middle;
      word-wrap: break-word;
      input{
        width: 63%;
        border: none;
      }
    }
    input::-webkit-input-placeholder {
      color: #C7C7CC;
    }
  }
</style>
